<script setup>
import SingleLayout from '@/components/layout/SingleLayout.vue'
import LetterNav from './components/LetterNav.vue'
import { TakeawayBox, User, Tickets } from '@element-plus/icons-vue'
const navItem = [
  { href: '/letter/pubs', title: '公开信' },
  { href: '/letter/write', title: '撰写信件' },
  { href: '/letter', title: '返回首页' }
]
</script>
<template>
  <letter-nav :nav-item="navItem"></letter-nav>
  <!-- <null-box size="20"></null-box> -->
  <div style="display: flex; justify-content: center">
    <div style="width: 85%">
      <single-layout class="single-layout">
        <el-menu-item index="/letter/user/all">
          <el-icon><User /></el-icon>
          <span>个人中心</span>
        </el-menu-item>
        <null-box size="10"></null-box>
        <el-menu-item index="/letter/user/list">
          <el-icon><Tickets /></el-icon>
          <span>信件列表</span>
        </el-menu-item>
        <null-box size="10"></null-box>
        <el-menu-item index="/letter/user/save">
          <el-icon><TakeawayBox /></el-icon>
          <span>暂存箱</span>
        </el-menu-item>
      </single-layout>
    </div>
  </div>
</template>
<style scoped>
::v-deep .single-layout {
  height: calc(100vh - 86px - 20px);
}
</style>
